<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>

    <!-- <px-radio-group v-model="time" class="radio-position" size="small" @change="settime">
      <px-radio-button label="6小时" />
      <px-radio-button label="12小时" />
      <px-radio-button label="24小时" />
      <px-radio-button label="自定义" @click="dialogVisible = true" />
    </px-radio-group> -->
    <!-- <px-dialog v-model="dialogVisible" title="选择时间" width="465px" align-center :before-close="handleClose">
      <px-date-picker
        v-if="time == '自定义'"
        v-model="times"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        :default-time="defaultTime"
      />
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="dialogVisible = false">取消</px-button>
          <px-button type="primary" @click="checkTime"> 确认 </px-button>
        </span>
      </template>
    </px-dialog> -->
    <!-- <px-tooltip class="box-item" effect="light" content="Left Center prompts info" placement="left">
      <template #content>
        <div><span style="display: inline-block; width: 12px; height: 8px; margin-right: 10px; background: #5792f3" />OOW</div>
        <div><span style="display: inline-block; width: 12px; height: 8px; margin-right: 10px; background: #28d892" />OOS</div>
        <div><span style="display: inline-block; width: 12px; height: 8px; margin-right: 10px; background: #ffca45" />OOC</div>
      </template>
      <img class="topIcon" src="@/assets/images/topicon.png" />
    </px-tooltip> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from "vue";
import echartsDom from "./echartsDom.vue";
import { querySpcIndicatorOut } from "@/api/waterKanban";
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 1), new Date(2000, 1, 1, 23, 59, 59)];

onMounted(() => {
  const end = new Date();
  const start = new Date();
  start.setTime(start.getTime() - 3600 * 1000 * 6);
  times.value = [formatDate(start), formatDate(end)];
  getTendency(times.value[0], times.value[1]);
});
const time = ref("6小时");
const times = ref([]);
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  // PxMessageBox.confirm("Are you sure to close this dialog?")
  //   .then(() => {
  //     done();
  //   })
  //   .catch(() => {
  //     // catch error
  //   });
  done();
};
const settime = val => {
  if (val == "1小时") {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 1);
    times.value = [formatDate(start), formatDate(end)];
    getTendency(times.value[0], times.value[1]);
  }
  if (val == "6小时") {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 6);
    times.value = [formatDate(start), formatDate(end)];
    getTendency(times.value[0], times.value[1]);
  }
  if (val == "12小时") {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 12);
    times.value = [formatDate(start), formatDate(end)];
    getTendency(times.value[0], times.value[1]);
  }
  if (val == "24小时") {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24);
    times.value = [formatDate(start), formatDate(end)];
    getTendency(times.value[0], times.value[1]);
  }
};
const checkTime = () => {
  getTendency(times.value[0], times.value[1]);
  dialogVisible.value = false;
};
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);

const getTendency = (a, b) => {
  console.log(a, b);
  isShowEcharts.value = true;
  option.value = {
    color: ["#3B82F6 ", "#28D892", "#FFCA45"],
    grid: {
      left: "20px",
      top: "40px",
      right: "20px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      confine: true
    },
    yAxis: {
      name: "tCO2e",
      type: "category",
      boundarGap: false,
      axisLabel: {
        interval: 0
      },
      // data: response.xaxis
      data: ["2024-01", "2024-02", "2024-03", "2024-04", "2024-05", "2024-06", "2024-07", "2024-08"]
    },
    xAxis: {
      type: "value"
    },
    // dataZoom: [
    //   {
    //     show: true,
    //     start: 0,
    //     height: "8",
    //     end: 100
    //   }
    // ],
    series: [
      {
        // data: response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
        //   ? response.panelList.filter(item => item.title == "NaOH")[0].details.map(item => (item.value != null ? item.value : 0))
        //   : [0, 0, 0, 0, 0, 0, 0],
        data: [34128.06, 31058.18, 26225.85, 22989.32, 14847.11, 12461.93, 12529.38, 13856.97],
        type: "bar",
        name: "创新中心一期",
        stack: "total",
        barWidth: "25px",
        label: {
          show: true,
          color: "black"
        },
        emphasis: {
          focus: "series"
        }
      }
    ]
  };
};
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.radio-position {
  position: absolute;
  top: 6px;
  left: 95px;
}

:deep(.px-dialog__header) {
  text-align: left;
}

.topIcon {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  cursor: pointer;
}
</style>
